<template>
    <div class="Pur-search-div">
         <input type="text" placeholder="烤肉" class="Pur-search"></input>
        <span class="Pur-xiangji"><i class="iconfont icon-xiangji"></i></span>
        <button class="Pur-search-button" @click="cartToSearch()">搜索</button>
    </div>
</template>
<style scoped> 
.Pur-search-div{
   position: absolute;
    width: 440px;
   height: 65px; /* 太大覆盖别的导致hover无效 */
    top: 50px;
    left: 1150px;
}
.Pur-search{
 position: absolute;
    top: 10px;
    left: 0px;
    width: 430px;
    height: 40px;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgb(197, 194, 194);
    font-size: 15px;
    padding: 2px;

}
.Pur-search:hover{
    border: 1px solid #ff5000;
}
.Pur-xiangji{
 position: absolute;
    top: 16px;
    left: 328px;
    width: 30px;
    height: 30px;
}
.Pur-xiangji i{
    font-size: 30px;
}
.Pur-xiangji:hover,.Pur-search-button:hover{
    cursor: pointer;
}
.Pur-search-button{
 position: absolute;
    top: 12px;
    left: 375px;
    width: 60px;
    height: 40px;
    border-radius: 10px;
    color: aliceblue;
    background: #ff5000;
    border: 1px solid rgb(197, 194, 194);
    padding: 2px;
    font-size: 15px;
}
</style>
<script> 
export default {
    name: "ShoppingCartSearch",
    data() {
        return {
            
        }
    },
    methods: {
           cartToSearch() {
      const searchValue = document.querySelector(".Pur-search").value;
      if (searchValue !== "") {
        this.$router.push({
          path: "/searchView",
          query: {
            value: searchValue,
          },
        });
      }
    },
    },

}
</script>